﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/layui/layui.js"></script>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    @*多条件查询*@
    <p>&nbsp;</p>
    <div class="layui-form-item">
        <form class="layui-form" onsubmit="return false;">
            <label class="layui-form-mid">&nbsp;&nbsp;商品名</label>
            <div class="layui-input-inline">
                <input type="text" id="ProductName" name="ProductName" placeholder="请输入商品名" autocomplete="off" class="layui-input" />
            </div>
            <label class="layui-form-mid">&nbsp;是否上/下架</label>
            <div class="layui-input-inline" style="width:85px;">
                <select id="Isstate" name="Isstate">
                    <option value="">请选择</option>
                    <option value="上架">上架</option>
                    <option value="下架">下架</option>
                </select>
            </div>
            <button class="layui-btn" id="serch" data-type="reload">搜索</button>
        </form>
    </div>
    @*数据表格*@
    <table class="layui-hide" id="demo" lay-filter="test"></table>
    @*工具栏模板：*@
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="BathDel"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="FaBu"><i class="layui-icon layui-icon-upload-circle"></i>批量发布</button>
            <button class="layui-btn layui-bg-blue layui-btn-sm" lay-event="XiaJia"><i class="layui-icon layui-icon-close"></i>批量下架</button>
        </div>
    </script>

    @*行工具栏*@
    <script type="text/html" id="barDemo">
        @*<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>*@
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'laydate'], function () {
            var table = layui.table, $ = layui.$, layer = layui.layer;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#PubTime'
            });
            laydate.render({
                elem: '#end'
            });
            //第一个实例
            table.render({
                elem: '#demo'
                , height: 450
                , url: '/Prdouct/GetPrdouct' //数据接口
                , method: "post"
                , page: true //开启分页
                , toolbar: '#toolbarDemo'
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'Id', title: 'ID', width: 80 }
                    , { field: 'ProductName', title: '商品名', width: 180 }
                    , { field: 'ProductImg', title: '商品图片', templet: '<div><img src="/Content/{{ d.ProductImg}}" style="width:40px;height:30px"></div>', width: 100 }
                    , { field: 'Price', title: '商品价格', width: 90 }
                    , { field: 'Count', title: '商品数量', width: 90 }
                    , { field: 'CreateTime', title: '上架时间', width: 120 }
                    , { field: 'Particulars', title: '商品简介', width: 135}
                    , { field: 'Site', title: '商品地址', width: 135 }
                    , { field: 'TypeId', title: '类别', width: 135}
                    , { field: 'Isstate', title: '商品状态', width: 135 }
                    , { fixed: 'right', width: 150, align: 'center', width: 180, toolbar: '#barDemo' }
                ]]

                , id: 'testReload'
            });

            //搜索
            active = {
                reload: function () {
                    table.reload('testReload', {
                        where: {
                            "ProductName": $("#ProductName").val()
                            , "Isstate": $("#Isstate").val()
                        }
                    })
                }
            }
            //绑定单击事件，
            $("#serch").click(function () {
                active.reload();
            });
            //表头监听事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            type: 2,
                            title: "数据添加",
                            area: ["500px", "500px"],
                            content: "/Prdouct/Add"
                        });;
                        break;
                    case 'BathDel':
                        var arrId = "";
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            arrId += checkStatus.data[i].Id + ',';
                        }
                        if (arrId == "") {
                            layer.msg("请选择要删除的数据！");
                        } else {
                            layer.confirm('确认删除吗？', function (index) {
                                $.post("/Prdouct/BatchDelArticele", { "Ids": arrId }, function (res) {
                                    if (res.Success) {
                                        table.reload('testReload');
                                        layer.msg(res.Message)
                                    } else {
                                        layer.msg(res.Message)
                                    }
                                }, 'json');
                            });
                        }
                        break;
                    case 'FaBu':
                        var arrId = "";
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            arrId += checkStatus.data[i].Id + ",";
                        }
                        if (arrId != "") {
                            layer.confirm('确定发布？', function (index) {
                                $.post("/Prdouct/FaBu",
                                    { "Ids": arrId }, function (res) {
                                        if (res.Success)  {
                                            table.reload('testReload');
                                            layer.msg(res.Message)
                                        } else {
                                            layer.msg(res.Message)
                                        }
                                }, 'json');
                            });

                        } else {
                            layer.msg("请选择要发布的数据");
                        }
                        break;
                    case 'XiaJia':
                        var arrId = "";
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            arrId += checkStatus.data[i].Id + ",";
                        }
                        if (arrId != "") {
                            layer.confirm('确定下架', function (index) {
                                $.post("/Prdouct/XiaJia",
                                    { "Ids": arrId }, function (res) {
                                        if (res.Success) {
                                            table.reload('testReload');
                                            layer.msg(res.Message)
                                        } else {
                                            layer.msg(res.Message)
                                        }
                                    }, 'json');
                            });

                        } else {
                            layer.msg("请选择要下架的数据");
                        }
                        break;
                };
            });

            //监听行工具条
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'detail') { //查看
                    var id = data.Id;
                    layer.open({
                        type: 2,
                        title: "文章详情",
                        area: ["500px", "500px"],
                        content: "/Back/Article/Detail?id=" + id
                    });
                } else if (layEvent === 'del') { //删除
                    var id = data.Id;
                    layer.confirm('你确定要删除数据吗？', function (index) {
                        $.post("/Prdouct/ArtDel", { id: id }, function (res) {
                            if (res.Success1) {
                                layer.msg("删除成功！");
                                table.reload('testReload');
                            } else {
                                layer.msg("删除失败！");
                            }
                        }, 'json');
                    });
                } else if (layEvent === 'edit') { //编辑
                    var id = data.Id;
                    layer.open({
                        type: 2,
                        title: "修改      " + id,
                        area: ["500px", "500px"],
                        content: "/Prdouct/ArtEdit?id=" + id
                    });
                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });
        });
    </script>

</body>
</html>
